<template>
	<div class="FMdetail my-app" :class="{my_app:path=='/OFMlist/order'}">
		<div class="main  my-form-item" v-if="type==='set'" v-show="settlementdetails.show">
			<h2 class="my-h2">结算详情</h2>
			<div class="top">
				<div class="content ">
					<div class="culonm">
						<p>结算单号：{{settlementdetails.settle_order}}</p>
						<p>结算账号：26837839949</p>
						<p>开户行：中国银行重庆支行</p>
					</div>
					<div class="culonm">
						<p>订单数量：{{settlementdetails.order_number}}</p>
						<p>结算总额：{{settlementdetails.settle_money}}元</p>
						<p>结算时段：{{settlementdetails.time}}</p>
					</div>
				</div>
				<span @click="toSettleOrderInfo" class="lookbtn">查看订单明细</span>
			</div>
		</div>
		<div class="main  my-form-item" v-if="type==='order'">
			<div class="top">
				<div class="buttom" v-show="path=='/OFMlist/order'">
					<div class="li">
						<label>查询时段</label>
						<div class="input-box">
							<el-date-picker v-model="datepicker" type="daterange" range-separator="至" start-placeholder="开始日期"
							 end-placeholder="结束日期" value-format="yyyy-MM-dd">
							</el-date-picker>
						</div>
					</div>
					<div class="li">
						<input class="input" placeholder="输入订单ID或会员名" />
					</div>
				</div>
				<div class="buttom" v-show="path!='/OFMlist/order'">
					<p>订单数量：{{settleOrderInfo.order_number}}</p>
					<p>订单间数/票数：{{settleOrderInfo.goods_number}}</p>
					<p>订单总额：{{settleOrderInfo.money}}元</p>
					<p>结算总额：{{settleOrderInfo.settle_money}}元</p>
				</div>

				<div class="buttom">
					<div class="li">
						<div class="EXCEL-btn "> 导出该时段订单汇总列表（EXCEL）</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main bottom my-form-item">
			<h2 class="my-h2" v-show="type==='set'">结算单列表</h2>
			<h2 class="my-h2" v-show="type==='order'">订单列表</h2>

			<div class="content" v-show="type==='set'">
				<div class="buttom" style="margin-bottom: 20px;">
					<div class="li">
						<input class="input" v-model="keywords" @blur="settleList" placeholder="输入查询条件" />
					</div>
					<div class="li">
						<label>查询时段</label>
						<div class="input-box">
							<el-date-picker v-model="datepicker" @change="settleList" type="daterange" range-separator="至" start-placeholder="开始日期"
							 end-placeholder="结束日期" value-format="yyyy-MM-dd">
							</el-date-picker>
						</div>
					</div>
				</div>
				<tab-border :tablist="tablist1" @tabborder="tabborder"></tab-border>
				<com-table :ComTable="ComTable1" @ComTablesondata="ComTablesondata"></com-table>

				<page :page="pageList"></page>
			</div>
			<div class="content" v-show="type==='order'">
				<com-table :ComTable="ComTable2" @ComTablesondata="ComTablesondata"></com-table>
				<page :page="pageList"></page>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		name: "FMdetail",
		data() {
			return {
				type: this.$route.params.type,
				path: this.$route.path,
				isactive: 1,
				datepicker: [],
				keywords: "",
				channel_settle_status: "",
				pageList: {},
				tablist1: {
					isactive: 0,
					list: [{
						id: 0,
						name: "全部结算单",
					}, {
						id: 1,
						name: "未结算",
					}, {
						id: 2,
						name: "已结算",
					}, {
						id: 3,
						name: "异常",
					}, {
						id: 4,
						name: "未处理",
					}, ],
				},
				ComTable1: {
					header: "headercolor",
					title: [{
						label: '结算单号',
						prop: 'settle_order'
					}, {
						label: '结算金额(元)',
						prop: 'settle_money'
					}, {
						label: '订单数量',
						prop: 'order_number',
					}, {
						label: '结算时间',
						prop: 'channel_settle_time',
					}, {
						label: '结算状态',
						prop: 'channel_settle_status_text',
					}, {
						width: "80px",
						label: '查看详情',
						type: "btn",
						btnlist: [{
							router: false,
							id: "",
							color: "",
							text: "详情",
						}, ]
					}, ],
					tableData: [],
					multipleSelection: []
				},
				ComTable2: {
					header: "headercolor",
					title: [{
						label: '订单ID',
						prop: 'order_id',
					}, {
						label: '出行时间',
						prop: 'go_time'
					}, {
						label: ' 人数',
						prop: 'people_number',
						width: "50px"
					}, {
						label: ' 车辆数',
						prop: 'car_number',
						width: "50px"
					}, {
						label: ' 核销金额(元)',
						prop: 'check_money',
					}, {
						label: ' 核销时间',
						prop: 'check_time',
					}, {
						label: ' 结算状态',
						prop: 'channel_settle_status',
						width: "70px"
					}, {
						label: ' 结算时间',
						prop: 'channel_settle_time',
					}, {
						width: "50px",
						label: '查看详情',
						type: "btn",
						btnlist: [{
							router: true,
							id: "/FMdetails",
							color: "",
							text: "详情",
						}, ]
					}, ],
					tableData: [{
							a: 1,
							b: [1, 1, 1]
						},
						{
							a: 1,
							b: [1, 1]
						},
					],
					multipleSelection: []
				},
			}
		},
		computed: {
			...mapGetters([
				'token',
				'orderselectindex',
				'settlementdetails',
				'settleOrderInfo',
				'ReqsettleorderDetail'
			])
		},
		mounted() {},
		created() {
			if (this.type === 'set') {
				this.settleList()
			}
			if (this.type === 'order') {
				this.SetsettleOrderInfo()
			}
		
		},
		beforeRouteLeave(to, from, next) {
			if(to.name!='FMdetails'){
					var details=JSON.parse(JSON.stringify(this.settlementdetails))
					details.show=false;
					this.getsettlementdetails(details)
			}
			next();
		},
		methods: {
			...mapActions({
				getorderselectindex: 'getorderselectindex',
				getsettlementdetails: 'getsettlementdetails',
				getsettleOrderInfo: 'getsettleOrderInfo',
				getReqsettleorderDetail: 'getReqsettleorderDetail',
			}),
			tabactive(res) {
				this.isactive = res;
			},
			tabborder(i) {
				if (i === 0) {
					this.channel_settle_status = "";
				} else {
					this.channel_settle_status = i;
				}
				this.settleList();
			},
			ComTablesondata(i) {
				this.getReqsettleorderDetail(i.row)
				if (i.btnlist.router) {
					this.$router.push(i.btnlist.id)
				} else {
					i.row.token = this.token;
					i.row.show=true;
					this.getsettlementdetails(i.row);
				}
			},
			// 财务管理 - 结算单列表
			settleList() {
				this.$api.GetsettleList({
						token: this.token,
						channel_settle_status: this.channel_settle_status,
						keywords: this.keywords,
						start_time: this.datepicker[0],
						end_time: this.datepicker[0],
					})
					.then(res => {
						if (res.code === 200) {
							this.getorderselectindex(res)
							this.ComTable1.tableData = this.orderselectindex.result.data;
							this.pageList = {
								total: this.orderselectindex.result.total, // String 总共数据条数
								per_page: this.orderselectindex.result.per_page, // String 每页数据条数
								current_page: this.orderselectindex.result.current_page, // String 当前第几页
								last_page: this.orderselectindex.result.last_page, // String 最后一页
							}
							for (var i = 0; i < this.ComTable1.tableData.length; i++) {
								if (this.ComTable1.tableData[i].channel_settle_status === 1) {
									this.ComTable1.tableData[i].channel_settle_status_text = "未结算"
								}
								if (this.ComTable1.tableData[i].channel_settle_status === 2) {
									this.ComTable1.tableData[i].channel_settle_status_text = "已结算"
								}
							}
						} else {
							this.$alert(res.meg, '提示', {
								confirmButtonText: '确定',
							});

						}

					})
			},
			// 财务管理 - 跳转结算详情
			toSettleOrderInfo() {
				this.SetsettleOrderInfo()
				this.$router.push({
					path: "/FMlist/order",
				})
			},
			// 财务管理 - 结算详情
			SetsettleOrderInfo() {
				this.$api.GetsettleOrderInfo({
					token: this.token,
					type: this.settlementdetails.type,
					settle_order: this.settlementdetails.settle_order,
					channel_settle_status: this.settlementdetails.channel_settle_status,
					channel_settle_time: this.settlementdetails.channel_settle_time,
				}).then(res => {
					if (res.code === 200) {
						this.getsettleOrderInfo(res)
						if (this.settleOrderInfo.channel_settle_status == 1) {
							for (var i = 0; i < this.settleOrderInfo.list.data.length; i++) {
								this.settleOrderInfo.list.data[i].channel_settle_status = "未结算"
								this.settleOrderInfo.list.data[i].channel_settle_time = this.settleOrderInfo.channel_settle_time
							}
						}
						if (this.settleOrderInfo.channel_settle_status == 2) {
							for (var i = 0; i < this.settleOrderInfo.list.data.length; i++) {
								this.settleOrderInfo.list.data[i].channel_settle_status = "未结算"
								this.settleOrderInfo.list.data[i].channel_settle_time = this.settleOrderInfo.channel_settle_time

							}
						}
						this.ComTable2.tableData = this.settleOrderInfo.list.data;
						this.pageList = {
							total: this.settleOrderInfo.list.total, // String 总共数据条数
							per_page: this.settleOrderInfo.list.per_page, // String 每页数据条数
							current_page: this.settleOrderInfo.list.current_page, // String 当前第几页
							last_page: this.settleOrderInfo.list.last_page, // String 最后一页
						}
					} else {

						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
						});
					}
				})

			}
		},
		watch: {
			'$route'(to, from) {
				this.type = to.params.type;
				if (this.type === 'set') {
					this.ComTable1.tableData = this.orderselectindex.result.data;
				}
				if (this.type === 'order') {
					this.ComTable2.tableData = this.settleOrderInfo.list.data;
				}
			},
			type(newValue, oldValue) {

			}
		}
	}
</script>

<style scoped lang="less">
	.my_app {
		padding: 0;
	}

	.FMdetail {
		width: 100%;
		box-sizing: border-box;

		.main {

			.buttom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 10px 0;
				box-sizing: border-box;

				&:last-child {
					.li {
						width: 100%;
					}
				}

				.li {
					display: flex;
					line-height: 40px;

					label {
						margin-right: 10px;
					}

					.input {
						border: none;
						border: 1px solid #DCDFE6;
						padding: 0 20px;
						box-sizing: border-box;
						border-radius: 50px;
					}

					.EXCEL-btn {
						cursor: pointer;
						color: #fff;
						background: #ff9900;
						padding: 0 20px;
						box-sizing: border-box;
						border-radius: 5px;
						margin: auto;
					}

				}
			}

			.top {
				width: 100%;

				.content {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.culonm {
						width: 50%;
						text-align: left;
						box-sizing: border-box;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;
						font-size: 14px;
						color: #666;

						p {
							width: 100%;
							line-height: 30px;

						}
					}
				}


				.lookbtn {
					cursor: pointer;
					margin: 20px auto;
					display: block;
					width: 135px;
					padding: 5px 10px;
					color: #fff;
					background: #ff9900;
					border-radius: 5px;
					text-align: center;
				}
			}

			&.bottom {
				.content {
					width: 100%;

					.cell {
						text-align: center;
					}

					.el-table .warning-row {
						background: #ffffcc;
					}
				}
			}

		}
	}
</style>
